import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { ResponsiveGrid } from '@alifd/next';
import TopList from './TopList';
import { useStore } from '@/hooks';
import PieGroup from './PieGroup';
import SceneTable from './SceneTable';
import SceneBar from './SceneBar';

const { Cell } = ResponsiveGrid;

const Index = ({ activity, modal, onCancel, onSubmit }) => {
  const [state, steState] = useState(null);
  const [scene, steScene] = useState(null);
  const { activityStore: store } = useStore();
  useEffect(() => {
    if (modal[1]?.startsWith?.('toClose')) handleCancel();
  }, [modal]);

  useEffect(() => {
    (async () => {
      await init();
    })();
  }, []);

  async function init() {
    try {
      const res = await store.getActivesStatistic({ data: { sceneType: 'activity', type: 'scene', source: activity?.id } });
      const res2 = await store.getActivesList({
        data: { sceneType: 'activity', type: 'scene', source: activity?.id },
        pg: { page: 0, size: 10 },
      });
      steState(res);
      steScene(res2);
    } catch (error) {
      console.error('🚀 _ file: index.jsx:25 _ error:', error);
      throw error;
    }
  }

  const handleCancel = () => {
    onCancel?.();
  };

  function ComponentsHOC(Component, ...args) {
    return (<Component data={state} scene={scene} {...args} />);
  }

  return (
    <ResponsiveGrid gap={12}>
      <Cell colSpan={12}>
        {ComponentsHOC(TopList, activity?.id)}
      </Cell>
      <Cell colSpan={6}>
        {ComponentsHOC(SceneTable)}
      </Cell>
      <Cell colSpan={6}>
        {ComponentsHOC(SceneBar)}
      </Cell>
      <Cell colSpan={12}>
        {ComponentsHOC(PieGroup, activity?.id)}
      </Cell>
    </ResponsiveGrid>
  );
};

export default observer(Index);
